<template>
  <div class="">
    <!-- 景点查询 -->
    <PagePanel :panelTitle="activePanel.panelTitle" @clickClose="clickClose">
      <el-card style="margin-top: 10px" class="box-card">
        提示：点击旅游景点，查看景点详细信息。
      </el-card>
      <el-card style="margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <span>景点详细信息</span>
        </div>
        <div
          v-for="(item, index) in scenicSearchInfoName"
          :key="index"
          class="text item"
        >
          <span style="font-size: 14px; font-weight: 700; color: #2d7ad6">{{
            item.value
          }}</span>
          :{{ scenicSearchInfo[item.name] }}
        </div>
      </el-card>
    </PagePanel>
  </div>
</template>

<script>
import PagePanel from "@/components/PagePanel";
import markerImg from "../../../assets/img/scenicSearch.png";
import { getScenicSpotAll, findScenicSpotInfo } from "@/api/home";
let billboards = null;
export default {
  name: "ScenicSearch",
  components: { PagePanel },
  data() {
    return {
      handler: null,
      scenicSearchInfo: {},
      scenicSearchInfoName: [
        { name: "name", value: "名称" },
        { name: "address", value: "地址" },
        { name: "DongJing", value: "东经" },
        { name: "BeiWei", value: "北纬" },
      ],
    };
  },
  computed: {
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
  mounted() {
    this.setCamera();
    this.scenicSearch();
    this.leftClickScenic();
  },
  methods: {
    setCamera() {
      const position = Cesium.Cartesian3.fromDegrees(
        113.47250731776862,
        29.499661169915218,
        212026.7370625948
      );
      cesiumViewer.camera.flyTo({
        destination: position, // 相机位置
        orientation: {
          heading: 6.283185307179575, // 水平旋转  -正北方向
          pitch: -1.5689717563916967, // 上下旋转  --俯视朝向
          roll: 0, // 视口翻滚角度
        },
      });
    },

    leftClickScenic() {
      this.handler = new Cesium.ScreenSpaceEventHandler(cesiumViewer.canvas); //获取地图对象
      this.handler.setInputAction((e) => {
        const pick = cesiumViewer.scene.pick(e.position);
        // if (pick && pick?.id) {
        //   alert(JSON.stringfy(pick.properties));
        // }
        if (pick && pick?.primitive) {
          if (pick.primitive.properties.name) {
            // alert(pick.primitive.properties.BiaoZhunMin)
            const id = pick.primitive.properties.id;

            findScenicSpotInfo(id).then((response) => {
              this.scenicSearchInfo = JSON.parse(response.data);

              this.scenicSearchInfo.DongJing = Number(
                this.scenicSearchInfo.position.split(",")[0]
              );
              this.scenicSearchInfo.BeiWei = Number(
                this.scenicSearchInfo.position.split(",")[1]
              );

              console.log(this.scenicSearchInfo);
            });
          }
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

      //鼠标经过显示名称
      this.handler.setInputAction((e) => {
        cesiumViewer.entities.removeById("scenicLabel");
        const pick = cesiumViewer.scene.pick(e.endPosition);
        if (pick && pick.primitive) {
          cesiumViewer.entities.add({
            id: "scenicLabel",
            position: pick.primitive.position,
            label: {
              text: pick.primitive.properties.name,
              pixelOffset: new Cesium.Cartesian2(0, -90),
              font: "20px Helvetica", //设置文字大小和字体

              // backgroundPadding:new Cesium.Cartesian2(100, 20),  //设置背景内边距
              // fillColor: Cesium.Color.SKYBLUE, //设置文字填充的颜色
              // outlineColor: Cesium.Color.BLACK,  //设置外框颜色
              // outlineWidth: 2,  //设置外框大小
              // style: Cesium.LabelStyle.FILL_AND_OUTLINE, //填充方式，内外都填充
              // scale : 2.0,   //设置放大缩小
              // showBackground : true,  //显示背景颜色
            },
          });
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },
    // 地名空间分布
    async scenicSearch() {
      const res = await getScenicSpotAll();
      if (res.code === 20000 && res.data !== 0) {
        const info = JSON.parse(res.data);
        this.addBillboards(info);
      }
    },
    /**
     * 以primitive方式加载
     * @param {*} info
     */
    addBillboards(info) {
      const features = [];
      info.map((item) => {
        const feature = {
          properties: {
            ...item,
            DongJing: Number(item.position.split(",")[0]),
            BeiWei: Number(item.position.split(",")[1]),
          },
          coordinates: [
            Number(item.position.split(",")[0]),
            Number(item.position.split(",")[1]),
          ],
        };
        features.push(feature);
      });

      billboards = cesiumViewer.scene.primitives.add(
        new Cesium.BillboardCollection()
      );

      let feature, coordinates, position;
      for (let i = 0; i < features.length; i++) {
        feature = features[i];
        coordinates = feature.coordinates;
        position = Cesium.Cartesian3.fromDegrees(
          coordinates[0],
          coordinates[1],
          0
        );
        // pointCollection.add({
        //     position : Cesium.Cartesian3.fromDegrees(longitude, latitude),
        //     color : color
        // });
        const b = billboards.add({
          id: feature.properties.id,
          width: 80,
          height: 80,
          position: position,
          image: markerImg,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          // data: { community, gridsMini, housingEstate, lat, lng, structure },
          properties: feature.properties,
          // scaleByDistance
          // translucencyByDistance = new Cesium.NearFarScalar(1.5e2, 1.0, 8.0e6, 0.0);
        });
        b.properties = feature.properties;
      }
      cesiumViewer.zoomTo(billboards);
    },

    //添加广告牌
    addBillboard(position) {
      //position为cartsian3
      viewer.entities.add({
        position: position, // Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
        billboard: {
          image: "gisdata/images/marker.png",
          sizeInMeters: true,
          scale: 0.1,
          show: true,
          width: 100,
          height: 100,
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            0,
            6.8e10
          ),
        },
      });
    },
    removeLeftClickScenic() {
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      this.handler.destroy();
    },
    clickClose() {
      console.log("@@@@@@@@@@@@", this.activePanel);
    },
  },
  beforeDestroy() {
    cesiumViewer.entities.removeById("scenicLabel");
    cesiumViewer.scene.primitives.remove(billboards);
    billboards = null;
    this.removeLeftClickScenic();
    //因为面板都是用的v-if，会销毁面板，需要销毁的事件也可以写这里
  },
};
</script>
<style lang="less" scoped></style>
